<template>
<!--  控制箱所属设备-->
  <div class="wrapper">
    <ul class="subGroup d-flex justify-content-around flex-wrap" style="padding-top: 10px;">
      <li class="subItem" v-for="(item,inex) in deviceList">
        <div class="sub-left float-left">
          <img v-if="item.id==1" src="~assets/image/device/pulb.png">
          <img v-else-if="item.id==2" src="~assets/image/device/485sensor.png">
          <div class="position-relative" v-else-if="item.id==3">
            <img  src="~assets/image/device/illuminance_sensor.png" style="position:absolute;clip: rect(0 70px 68px 0);top:18px;left: 17px;">
          </div>
          <img v-else src="~assets/image/device/meter.png">
        </div>
        <div class="sub-right  d-flex flex-column justify-content-between">
          <label class="title">{{item.name}}</label>
          <label class="count">{{item.count}}</label>
          <el-button class="ur-btn ur-btn-primary w65" @click="toPage(item.url,item.navId)">...更多</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  import fetch from "api/fetch";
  export default {
    components: {},
    props: {},
    data() {
      return {
        deviceList:[
          {id:1,navId:2,name:"灯杆总数",count:300,url:'poleList',imgSrc:'~assets/image/device/pulb.png'},
          {id:2,navId:3,name:"485传感器",count:300,url:'sensorList?type=1',imgSrc:'~assets/image/device/485sensor.png'},
          {id:3,navId:3,name:"照度传感器",count:300,url:'sensorList?type=2',imgSrc:'~assets/image/device/illuminance_sensor.png'},
          {id:4,navId:4,name:"电表",count:300,url:'meterList',imgSrc:'~assets/image/device/meter.png'},
        ]
      }
    },
    watch: {},
    computed: {},
    methods: {
      toPage(url,id){
        this.setNavActive(id)
        fetch.toPage(url)
      },
      ...mapMutations({
        setNavActive:'comm/setNavActive'
      })
    },
    created() {
    },
    mounted() {
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .subItem{margin-bottom:10px;
    .sub-left{width:104px;height:104px;text-align:center;line-height:104px;background: rgba(0,0,0,0.2);
      border: 1px solid #0099ff;margin-right:16px;}
    .sub-right{height:104px;width:70px;}
    .title{color:#0099FF;}
    .count{font-family: 'electronicFont';font-size:32px;height:24px;color:#44FF95;}
    .el-button span{
      letter-spacing:2px;
    }
  }
</style>
